<template>
	<view class="content">
		<StatusBar></StatusBar>
		<Loading class="loading-box" v-show="!isLoading" :isStatus='loadStatus'></Loading>
		<view class="locationBox itemBox animation-fade clickEffict" :style="[{height:StatusBar.height+'px'}]"
			@click="back">
			<text class="cuIcon-back text-xxl backicon"></text>
			<text class="addr-name  clickEffict" v-if="addressName==''">{{title}}</text>
			<text class="addr-name  clickEffict text-cut" v-if="addressName!=''">{{addressName || '--'}}</text>
		</view>
		<!-- 	定位结束 -->

		<view class="schoolBox" :style="[{height:StatusBar.height+10+'px',marginTop:10+'px'}]">

			<view class="searchBox" :style="[{height:StatusBar.height+10+'px'}]">
				<input class="inputSchool" type="text" value="" placeholder="请输入您的学校名称以查询" v-model="inputSchool" />
				<text class="cuIcon-search search clickEffict" @click="searchSchool"></text>
			</view>

		</view>

		<view class="schoolBox " :style="[{height:scrollH+10+'px'}]">
			<scroll-view scroll-y="true" class="schoolBox1">
				<view class="search-result">
					<view class="result-box clickEffict" v-for="(item,index) in areaList"
						@click="shoplist(item.area_id)">
						<image class="cu-avatar round xs " :src="item.area_logo" mode=""></image>
						<!-- <view class="cu-avatar round xs margin-left"
							:style="[{backgroundImage:'url('+item.area_logo+')'}]">
						</view> -->
						<view class="result-box-name">
							{{item.area_name}}
						</view>
						<text class="cuIcon-right"></text>

					</view>


				</view>

				<view class="search-notice " @click="getLocation()">
					没有找到您的校区? 试试 <text class="text-blue text-bold"> 重新定位</text>
				</view>

				<view class="si-box " v-if="chengshi!=null">
					<view class="biaoti1 ">全部校区 </view>
				</view>


				<scroll-view class="si-box " :scroll-x="true" v-if="chengshi!=null">
					<view class="si-box">
						<view class="chengshi-item " v-for="(chengshi,index) in chengshi"
							:class="cityIndex==index?'chengshi-item-hover':''" @click="changeChengshi(index)">
							{{chengshi.name}}
						</view>
					</view>
				</scroll-view>

				<view class="result-box animation-slide-bottom clickEffict"
					v-for="(item,index) in chengshi[cityIndex].areas" :style="[{animationDelay: (index + 1)*0.1 + 's'}]"
					@click="shoplist(item.area_id,item.area_name)">

					<image class="cu-avatar round xs " :src="item.area_logo" mode=""></image>
					<!-- <view class="cu-avatar round xs " :style="[{backgroundImage:'url('+item.area_logo+')'}]">
					</view> -->


					<view class="result-box-name text-sm">
						{{item.area_name}}
					</view>
					<text class="cuIcon-right"></text>

				</view>
				<view class="foot">

				</view>
				<view class="result-box1 animation-slide-bottom " v-if="chengshi.areas.length>0">


					没有了

				</view>

			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "附近校区",
				StatusBar: this.Custom,
				W: this.WH,
				domain: this.apiHost,
				cityIndex: 0,
				addressName: '',
				inputSchool: "", //输入的学校名
				areaList: [], //学校列表
				chengshi: null,
				isPosition: false,
				scrollH: 0,
				isLoading: false, //是否加载完成显示
				loadStatus: 'load',
				type: 0,
			}
		},
		onLoad(option) {
			if (option.type) {
				this.type = option.type;
			}
		},
		onShow(option) {

			/**
			 * 获取当前位置信息
			 */
			uni.getLocation({
				type: 'wgs84',
				success: (res) => {
					this.getList(res.longitude, res.latitude);
					uni.setStorageSync('lnt', res.longitude)
					uni.setStorageSync('lat', res.latitude);
					this.isPosition = true;
					this.apiRequest('/mobile/Api/getLocation', {
						lng: res.longitude,
						lat: res.latitude
					}, 0).then(res => {
						this.isLoading = true;
						if (res.code == 200) {
							this.addressName = res.data.regeocode.formatted_address;
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none"
							})
						}
					})
				},
				fail: (e) => {
					console.log(e);
					this.isLoading = true;
				}
			});
			this.getAreaList();
		},

		watch: {
			inputSchool() {
				this.searchSchool();
			},
		},
		mounted() {
			this.getInfo().then((e) => {
				this.scrollH = e.screenHeight - (e.custom.top + e.custom.height * 2) - 40;
			})
		},
		methods: {
			/**
			 * 获取城市
			 */
			getAreaList() {
				this.apiRequest('/buyer/citylist', {}, 0, 'get').then(res => {
					if (res.code == 200) {
						this.chengshi = res.data;
					}
				})

			},
			/**
			 * 定位
			 */
			getLocation() {
				let getloction = () => {
					uni.getLocation({
						type: 'wgs84',
						success: (res) => {
							this.getList(res.longitude, res.latitude);
							uni.setStorageSync('lnt', res.longitude)
							uni.setStorageSync('lat', res.latitude)

							this.apiRequest('/mobile/Api/getLocation', {
								lng: res.longitude,
								lat: res.latitude
							}, 0).then(res => {
								this.addressName = res.data.regeocode.formatted_address
							})
						}
					});

				}
				if (!this.isPosition) {
					uni.openSetting({
						success: (e) => {

							if (e.authSetting["scope.userLocation"]) {
								getloction();
								this.isPosition = true;
							} else {
								uni.showToast({
									image: "none",
									title: "请微信授权获取位置"
								})
							}
						}
					})
				}
				uni.showToast({
					icon: 'loading',
					title: "定位中..."
				});
			},


			/**
			 * 选择学校
			 * @param {Object} area_id
			 */
			shoplist(area_id, name) {
				let type = this.type;
				let pages = getCurrentPages();
				let beforePage = pages[pages.length - 2];
				console.log("type", type)
				switch (type) {
					case 'change':
						beforePage.$vm.update(area_id, name);
						uni.navigateBack({
							delta: 1
						})

						break;
					default:
						this.$store.state.isResh = false;
						uni.setStorageSync('area_id', area_id);
						uni.navigateBack({
							delta: 1
						})
						break;
				}


			},
			/**
			 * 选择城市
			 */
			changeChengshi(index) {
				this.cityIndex = index;
			},
			back() {

				let area_id = uni.getStorageSync('area_id');
				if (area_id == null || area_id.length == 0) {
					uni.showModal({
						content: "为了更好的体验，请选择您所在的学校",
						showCancel: false
					})
					return;
				} else {
					uni.navigateBack({
						delta: 0,
					})
				}

			},

			/**
			 * 搜索输入的学校
			 */
			searchSchool() {

				this.apiRequest('/buyer/areaList', {
					keywords: this.inputSchool
				}, 1).then(res => {

					if (res.code == 200) {
						this.areaList = res.data.all;
					}

				})
			},
			/**
			 * 获取学校列表
			 */
			getList(lng, lat) {
				this.apiRequest('/buyer/areaList', {
					lng: lng,
					lat: lat
				}, 0).then(res => {
					if (res.code == 200) {
						this.areaList = res.data.nearby;
					}

				})

			}




		}



	}
</script>

<style scoped>
	/**
	 * 位置样式
	 */
	.content {
		width: 100vw;
		overflow: hidden;
		height: 100vh;
	}

	.locationBox {
		width: 96vw;
		display: flex;
		flex-direction: row;
		text-align: left;
		align-items: center;
		font-weight: bold;

	}

	.loc-ico {
		height: 80%;
	}

	.addr-name {
		width: 65%;
		margin-left: 10upx;
		font-size: 32upx;
		font-weight: 800;
		display: -webkit-box;
		text-overflow: ellipsis;
		text-overflow: -o-ellipsis-lastline;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		overflow: hidden;
		-webkit-box-orient: vertical;

	}

	.biaoti {
		width: 60vw;
		display: flex;
		align-items: center;
		font-size: 32upx;
		margin-left: 3vw;
		font-weight: 600;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.biaoti1 {
		width: 98%;
		margin-left: 2%;
		display: flex;
		align-items: center;
		font-size: 32upx;
		font-weight: 800;

	}

	.backicon {
		font-size: 40upx;

	}

	.schoolBox {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.schoolBox1 {
		width: 94%;
		height: 100%;

	}

	.searchBox {

		width: 94%;
		display: flex;
		flex-direction: row;
		background: #FFFFFF;
		box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.05);
		border-radius: 20upx;
		position: relative;

	}

	.inputSchool {
		width: 80%;
		padding-left: 2%;
		height: 100%;

	}

	.search {
		position: absolute;
		float: right;
		right: 5%;
		font-size: 45upx;
		height: 100%;
		display: flex;
		color: #999999;
		align-items: center;
	}

	.search-result {
		width: 100%;


		min-height: 20upx;
		margin-top: 15upx;
	}

	.result-box {
		width: 100%;
		height: 100upx;
		margin-top: 15upx;
		background: #FFFFFF;
		display: flex;
		flex-direction: row;
		align-items: center;
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
		border-radius: 20upx;
	}

	.search-result-boxes {
		width: 100%;


	}

	.result-box1 {
		height: 10vh;
		line-height: 10vh;
		width: 100%;
		text-align: center;
	}

	.result-box-icon {
		width: 60upx;
		height: 60upx;
		margin-left: 1%;
	}

	.cu-avatar {
		margin-left: 20upx;
	}

	.result-box-name {
		width: 80%;
		height: 100%;
		display: flex;
		margin-left: 2%;
		font-size: 28upx;
		font-weight: 600;
		align-items: center;

	}

	.iconjiantou {
		color: #999999;
	}

	.search-notice {
		width: 100%;
		height: 8%;
		margin-top: 2vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.si-box {
		width: 98%;
		margin-left: 2%;
		height: 80upx;
		display: -webkit-box;
		align-items: center;
		flex-direction: row;
	}

	.chengshi-item {
		width: 120upx;
		height: 100%;
		font-size: 30upx;
		font-weight: 600;
		color: #999999;
		display: flex;
		align-items: center;
		justify-content: left;
	}

	.chengshi-item-hover {
		color: #000000;
	}

	.allSchoolBox {
		width: 93%;
		margin-left: 3%;
		height: 62vh;
	}
</style>
